<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title>自定义划词翻译</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            body {
                font-family: 'Microsoft YaHei', sans-serif;
                overflow-y: scroll;
            }

            a {
                text-decoration: none;
                color: #030DFF;
                transition: color .2s ease-in-out
            }

            a:hover {
                color: #C40000;
            }

            strong {
                font-weight: bold;
            }

            section {
                width: 700px;
                margin: 25px auto 0 auto;
                line-height: 30px;
            }

            section .tip {
                text-indent: 2em;
                color: gray;
            }

            .tip b {
                color: #fa7676;
            }

            section .setting {
                display: none;
                padding-left: 20px;
                /*margin-top: 10px;*/
            }

            section .setting.on {
                display: block;
            }

            section .setting label:nth-last-of-type(n+1) {
                padding-left: 20px;
            }

            section .talk {
                margin-top: 10px;
            }

            section .talk p {
                text-indent: 2em;
            }

            label {
                display: block;
                cursor: pointer;
                transition: all .2s;
            }

            label:hover {
                background-color: rgba(129, 129, 129, 0.2);
            }

            input {
                margin-right: 5px;
                position: relative;
                top: 1px;
            }
        </style>
    </head>
    <body>
        <section>
            <h3>设置</h3>

            <p class="tip">你可以把鼠标放到划词翻译按钮（即浏览器地址栏右侧的划词翻译图标）上查看当前设置。</p>
            <label><input type="checkbox" id="SELECTION">开启网页划词翻译</label>

            <div class="setting">
                <div>划词翻译时默认使用：</div>
                <label><input type="radio" name="QUERY_API" value="">自动为我选择合适的翻译引擎</label>
                <label><input type="radio" name="QUERY_API" value="yd">有道翻译</label>
                <label><input type="radio" name="QUERY_API" value="bd">百度翻译</label>
                <label><input type="checkbox" id="CTRL_NEEDED"><strong>按住</strong>或者<strong>按下</strong>Ctrl键时才显示翻译结果</label>

                <p class="tip">
                    开启上面的开关后，按住Ctrl后划词，或者划词后按一下Ctrl键才会翻译。从右键菜单里点击“使用……翻译”时会忽略该设置。P.S这个功能偶尔会失灵，我正在修复中 ;)
                </p>
                <label><input type="checkbox" id="IGNORE_CHINESE">有汉字时不翻译</label>

                <p class="tip">开启上面的开关后，一旦文本里包含哪怕一个汉字，就不会翻译。从右键菜单里点击“使用……翻译”时会忽略该设置。</p>

                <p class="tip">
                    另外，由于Chrome的安全策略，某些页面是无法使用划词翻译的，例如Chrome自家的网上商店。不过别担心，我专门为此准备了翻译盒子 ;)
                </p>
            </div>
        </section>
        <section>
            <h3>使用帮助</h3>

            <p>打开翻译盒子：Ctrl + Q（Mac用户请使用control + Q）</p>

            <p>切换网页划词翻译开关：Alt + Z</p>

            <p class="tip">以上快捷键都可以在“工具”->“扩展程序”->“键盘快捷键”（位于页面右下角）里自定义。</p>

            <p>翻译整个网页：鼠标右键，单击“划词翻译”里面的“翻译网页”</p>

            <p class="tip">
                由于Chrome的安全策略，网页翻译功能无法在 https 页面下使用。
            </p>

            <p>指定翻译引擎进行翻译：在<strong>选中的文本</strong>上单击右键，选择“划词翻译”菜单中想要使用的引擎翻译。</p>

            <p>朗读文本：在翻译盒子里输入想要阅读的文本，然后点击左下角的“朗读”按钮。</p>
        </section>
        <section>
            <h3>关于 划词翻译</h3>

            <p>你好，我是<a href="http://lmk123.duapp.com" target="_blank">Milk Lee</a></p>

            <p>我的邮箱&支付宝账号&PayPal账号：<a href="mailto:milk.lee@qq.com">milk.lee@qq.com</a></p>

            <p>
                <a href="https://chrome.google.com/webstore/support/ikhdkkncnoglghljlkmcimlnlhkeamad" target="_blank">问题反馈或功能建议请戳这里</a>，我每天都会查看一次。
            </p>

            <p>
                觉得很好用？<a href="https://chrome.google.com/webstore/detail/ikhdkkncnoglghljlkmcimlnlhkeamad/reviews" target="_blank">去为它评一个五星</a>吧！
            </p>

            <!--<p>或者<a href="donate.html">请我喝杯咖啡 ;)</a></p>-->

            <!--<div class="talk">-->
                <!--作者的话：（2014/6/28）-->

                <p>赞助名单在<a href="donate.html">这里</a>。</p>
            <!--</div>-->
        </section>
        <script src="js/options.js"></script>
    </body>
</html>
